
<!DOCTYPE html>
<html lang="zh-Hans" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Archive: 2018/2</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="TriDiamond Obsidian,"> 
    <meta name="description" content="一枚前端搬砖队队员的记录册,"> 
    <meta name="author" content="张白告丶"> 
    <link rel="alternative" href="atom.xml" title="默默默默燃" type="application/atom+xml"> 
    <link rel="icon" href="/img/favicon.png"> 
    <link href="https://fonts.loli.net/css?family=Roboto+Mono|Rubik&display=swap" rel="stylesheet">
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1429596_nzgqgvnmkjb.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

    
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/codemirror.min.css">

    
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.48.4/theme/dracula.css">

    
<link rel="stylesheet" href="/css/obsidian.css">

    
<link rel="stylesheet" href="/css/ball-atom.min.css">

<meta name="generator" content="Hexo 4.2.0"></head>


<body class="loading">
    <div class="loader">
        <div class="la-ball-atom la-2x">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <span id="config-title" style="display:none">默默默默燃</span>
    <div id="loader"></div>
    <div id="single" class="page">
    <div id="top">
        <a class="iconfont icon-left image-icon" href="javascript:history.back()"></a>
    </div>
    <div class="dark-obsidian section">
        <div class="article animated fadeIn">
            <div class="main">
                <div class="content animated fadeIn">
                    <div class="set">
                        <h1 style="text-align: center">Archived</h1>
                        <p style="text-align: center">「 149 」</p>
                        <ul class="timeline timeline-centered">
                            
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">April 2020</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 01, 2020</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2020/04/01/Vue/vue-config-js%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE/">vue.config.js基本配置</a>
                                        <p>
                                            12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576// vue.config.js 基本配置方法module.exports = &#123;  // 项目部...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">March 2020</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 25, 2020</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2020/03/25/Ts/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3TypeScript%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-%EF%BC%88%E4%B8%80%EF%BC%89/">&lt;深入理解TypeScript读书笔记&gt;（一）</a>
                                        <p>
                                            书本地址https://jkchao.github.io/typescript-book-chinese/#why
什么是TypeScript,为什么要使用TypeScript?根据TypeScript官网中的介绍，TypeScript - JavaScript the scales (属于Js的超集)，Ts发展至今已经是很多大型项目的标配，它提供的静态类型检查，大大的提高了代码的可维护性及...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 15, 2020</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2020/03/15/Js/%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">你不知道的箭头函数</a>
                                        <p>
                                            简言ES6的箭头函数，我们会在工作中经常知道，但是你知道什么时候使用箭头函数，什么时候不能使用箭头函数吗？
什么时候使用箭头函数？
为啥大多数情况都使用箭头函数？

作用域安全性:当箭头函数被一致使用时，所有东西都保证使用与根对象相同的this。如果一个标准函数回调与一堆箭头函数混合在一起，那么作用域就有可能变得混乱。
紧凑性:箭头函数更容易读写。
清晰度:使用箭头函数可明确知道当前 thi...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">December 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">December 12, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/12/12/Js/%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84-JSON-stringify-%E7%9A%84%E5%A8%81%E5%8A%9B/">你不知道的 JSON.stringify() 的威力</a>
                                        <p>
                                            原文地址
通过需求学习JSON.stringify()首先我们在开发的过程当中遇到这样一个处理数据的需求
123456const todayILearn = &#123;  _id: 1,  content: '今天学习 JSON.stringify()，我很开心！',  created_at: 'Mon Nov 25 2019 14:03:55 GMT+0800 (中国标准时间)',  u...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">November 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">November 25, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/11/25/Vue/%E4%BD%BF%E7%94%A8vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/">使用vue高阶组件</a>
                                        <p>
                                            前文高阶组件(HOC)是一种架构模式，在 React 中非常常见，但也可以在 Vue 中使用。它可以被描述为一种在组件之间共享公共功能而不需要重复代码的方法。HOC 的目的是增强组件的功能。它允许在项目中实现可重用性和可维护性。

只要你向一个方法传入组件，然后返回一个新的组件，这就是一个 HOC。


高阶组件在以下方面非常有用: 1.操作属性。 2.操作数据和数据抽象。 3.代码重用

...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">October 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">October 29, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/10/29/Vue/%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%90%86%E6%B8%85-Vue-3-0-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F/">一张图理清 Vue 3.0 的响应式系统</a>
                                        <p>
                                            转自
作者：Jrain链接

一个基本的例子Vue 3.0 的响应式系统是独立的模块，可以完全脱离 Vue 而使用，所以我们在 clone 了源码下来以后，可以直接在 packages/reactivity 模块下调试。
1.在项目根目录运行 yarn dev reactivity，然后进入 packages/reactivity 目录找到产出的 dist/reactivity.global...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">September 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">September 30, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/09/30/Node/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Node-js%E4%B8%AD%E7%9A%84%E8%BF%9B%E7%A8%8B%E4%B8%8E%E7%BA%BF%E7%A8%8B/">深入理解Node.js中的进程与线程</a>
                                        <p>
                                            原文地址
前言进程与线程是一个程序员的必知概念，面试经常被问及，但是一些文章内容只是讲讲理论知识，可能一些小伙伴并没有真的理解，在实际开发中应用也比较少。本篇文章除了介绍概念，通过Node.js 的角度讲解进程与线程，并且讲解一些在项目中的实战的应用，让你不仅能迎战面试官还可以在实战中完美应用
文章导览
面试会问
Node.js是单线程吗？


Node.js 做耗时的计算时候，如何避免阻塞...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">August 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 08, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/08/08/Js/%E5%9C%A817%E9%81%93%E9%A2%98%E4%B8%AD%E7%90%86%E8%A7%A3javascript%E7%9A%84%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2/">在17道题中理解javascript的类型转换</a>
                                        <p>
                                            原文地址
类型转换是将值从一种类型转换为另一种类型的过程（比如字符串转数字，对象转布尔值等）。任何类型不论是原始类型还是对象类型都可以进行类型转换，JavaScript 的原始类型有：number, string, boolean, null, undefined, Symbol。
1234567891011121314151617true + false12 / "6""number" +...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 01, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/08/01/Js/JavaScript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1%E7%9A%84%E4%B8%80%E4%BA%9B%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/">JavaScript异步编程回调地狱的一些解决方案</a>
                                        <p>
                                            原文地址

异步编程在JavaScript中非常重要。过多的异步编程也带了回调嵌套的问题，本文会提供一些解决“回调地狱”的方法。

123456setTimeout(function()&#123;    console.log("延时触发")&#125;,2000)fs.readFile('./samp.txt','utf-8',function(res,error)&#123;    c...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">July 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 31, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/07/31/Tools/Webpack-Freestyle-%E4%B9%8B-Long-Term-Cache-webpack-%E5%AE%9E%E7%8E%B0%E6%8C%81%E4%B9%85%E6%80%A7%E7%BC%93%E5%AD%98/">Webpack Freestyle 之 Long Term Cache(webpack 实现持久性缓存)</a>
                                        <p>
                                            原文地址
How Browser Cache Works首先，我们要搞清楚浏览器缓存是怎么工作的。 那么，就让我画一张图来告诉大家吧，嘻嘻。


浏览器: 我需要 foo.js
服务器: 让我找找。找到了，给你，缓存有效期为 1 年。
浏览器: 好，我把他缓存到磁盘里。

过了 2 天，

浏览器: 我需要 foo.js ，在缓存里找到了。缓存还有效，那直接读缓存。用户：哇塞，这网页秒开啊。...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 24, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/07/24/Js/%E9%80%9A%E8%BF%87%E4%B8%80%E4%B8%AA%E9%97%AE%E9%A2%98%E5%AD%A6%E4%B9%A0map-filter-reduce%E8%AF%AD%E6%B3%95/">通过一个问题学习map,filter,reduce语法</a>
                                        <p>
                                            比如一个从1-10的简单的数组，需要从中取奇数，你会怎么做？这个问题不难，有的少侠可能会使用for循环来过滤出偶数，某些少侠可能会使用while循环，又或是使用数组自带的filter方法。
这里，我们先不考虑使用for和while这些迭代方法，我们选择使用数组自带的filter方法，如果使用filter方法的话，
12345const nums = [1,2,3,4,5,6,7,8,9,10...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 15, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/07/15/Ts/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-vue-typescript-%E7%BC%96%E5%86%99%E9%A1%B5%E9%9D%A2-1/">如何使用 vue + typescript 编写页面(1)</a>
                                        <p>
                                            原文地址
起步使用 vue-cli 创建项目
vue create demo ，demo就是创建项目的名称提示选择预设，选择 Manually select features 回车确认选择typescript vuex  router babel css pre-processors，不使用linter，不选单元测试有需要另说回车后按照需要选择合适的选项选择完毕后回车等待资源准备
编码开始熟...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 04, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/07/04/Ts/TypeScript-%E7%9A%84%E5%A5%BD%E5%A4%84%E9%83%BD%E6%9C%89%E5%95%A5%EF%BC%9F%E5%92%8C-JavaScript-%E7%9A%84%E5%8C%BA%E5%88%AB%E5%9C%A8%E5%93%AA%EF%BC%9F/">TypeScript 的好处都有啥？和 JavaScript 的区别在哪？</a>
                                        <p>
                                            原文地址
在我看来 TypeScript 相对于 JavaScript ，除了静态类型外没带来任何东西。
既然如此
静态类型有什么好处静态类型的好处到处都有说，这里就不说得太详细了，随便列一点。

杜绝手误导致的变量名错误
自动完成
重构支持
类型可以一定程度上充当文档

静态类型解放脑容量，自动完成让我不需要记忆哪个变量里有哪些属性，也不需要记完整的变量名。
函数上的类型约束外加尽量主动写...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">June 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 13, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/06/13/Vue/vue%E4%B8%AD%E4%B8%8D%E5%B8%B8%E7%94%A8%E7%9A%84API%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/">vue中不常用的API的使用方法总结</a>
                                        <p>
                                            errorHandler官网介绍及使用：
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例
1234567Vue.config.errorHandler = function (err, vm, info) &#123;  //处理错误信息, 进行错误上报  //err错误对象  //vm Vue实例  //`info` 是 Vue 特定的错...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 12, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/06/12/Ts/TypeScript-%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7/">TypeScript 高级技巧</a>
                                        <p>
                                            原文地址
前言用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。
01 keyofkeyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。
1234567interface P...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">May 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 25, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/05/25/Node/Node%E5%AD%A6%E4%B9%A0(%E5%8D%81%E5%9B%9B)%20--Node%E9%A1%B9%E7%9B%AE-%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8/">Node学习(十四) --Node项目-商品列表</a>
                                        <p>
                                            Node.js项目介绍利用学到的知识，实现一个简单但实用的小项目如下：
这是一个商品列表，具有展示商品信息，添加商品，删除商品的功能。
项目的文件夹结构├── package.json├── server.js # 服务器代码├── config # 项目配置文件夹│     ├── config.dev.js # 开发环境配置│     ├── config.prod.js # 生产环境配...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 06, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/05/06/Node/Node%E5%AD%A6%E4%B9%A0(%E5%8D%81%E4%B8%89)%20--Stream%E6%B5%81/">Node学习(十三) --Stream流</a>
                                        <p>
                                            File System的问题我们通常会使用File System模块对文件进行读取，如下：
12345678fs.readFile('./test.txt', (error, buffer) =&gt; &#123;  if (error) &#123;    console.error(error)  &#125; else &#123;    // 读取文件成功    res.write...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">April 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 29, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/29/Node/Node%E5%AD%A6%E4%B9%A0(%E5%8D%81%E4%BA%8C)%20--%E4%BD%BF%E7%94%A8async-await%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93/">Node学习(十二) --使用async/await异步操作数据库</a>
                                        <p>
                                            上一篇使用Node.js操作数据库，虽然能实现功能，但是异步操作需要不断写回调函数，代码严重冗余，而且阅读困难。
可以使用co-mysql，将query方法该写为返回一个Promise，就可以使用async/await进行异步处理。
我们可以参考一下它的源码，看看它是如何实现将回调函数转换为
12345678910111213141516171819202122232425262728293...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 21, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/21/Node/Node%E5%AD%A6%E4%B9%A0(%E5%8D%81%E4%B8%80%EF%BC%89--%E4%BD%BF%E7%94%A8Nodejs%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93/">Node学习(十一) --使用Nodejs操作数据库</a>
                                        <p>
                                            Nodejs操作数据库Nodejs操作数据库需要用到mysql模块，通过npm i mysql -D进行安装。
之后可以通过mysql.createConnection方法新建一个数据库连接，需要传入的参数有地址、端口、登录名、密码，以及需要连接的数据库。
mysql.createConnection会返回一个connection对象，可使用connection.query方法，传入SQL语...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 21, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/21/Node/Node%E5%AD%A6%E4%B9%A0(%E5%8D%81)%20--%E6%95%B0%E6%8D%AE%E5%BA%93%E5%85%A5%E9%97%A8/">Node学习(十) --数据库入门</a>
                                        <p>
                                            数据库的分类1.文件数据库 它的优点是：数据保存在单一文件中，因此部署十分方便，常用来嵌入到APP中保存数据，以及手机中的短信、通话记录等。
常用的有SQLite、Access等。
2.关系型数据库 关系型数据库的功能强大，适用场景丰富，它的特点是数据之间互相是关联的。
比如淘宝，一个用户下有个人信息、订单信息、聊天记录等，可以分别存储在不同表中，通过用户ID相互关联起来。但它的性能不是最强...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 20, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/20/Node/Node%E5%AD%A6%E4%B9%A0(%E4%B9%9D)%20--Websocket/">Node学习(九)--Websocket</a>
                                        <p>
                                            WebSocket的优势1.性能高。
根据测试环境数据的不同，大约会比普通Ajax请求高2-10倍。 HTTP是文本协议，数据量比较大。
而WebSocket是基于二进制的协议，在建立连接时用的虽然是文本数据，但之后传输的都是二进制数据，因此性能比Ajax请求高。
2.双向通信。
如果是普通Ajax请求，需要实时获取数据，只能用计时器定时发送请求，这样会浪费服务器资源和流量。
而通过WebS...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 20, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/20/Node/Node%E5%AD%A6%E4%B9%A0(%E5%85%AB)%20--Ajax%E8%B7%A8%E5%9F%9F/">Node学习(八)--Ajax跨域</a>
                                        <p>
                                            Ajax跨域问题的产生原因Ajax请求无法跨域，在前端开发中是个常见问题，它的产生原因是，在浏览器接收服务端返回数据时，会检查该数据是否和当前发起请求的网址在同一域名下。若不是，则会丢弃该数据，并返回一个跨域错误。

在Ajax请求中，遵循如下流程：网页提交一个Ajax请求到浏览器，浏览器将请求发至服务器，服务器接收到请求后，返回响应数据给浏览器（服务器通常不会对域名进行区分），浏览器接收到...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 04, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/04/Node/Node%E5%AD%A6%E4%B9%A0(%E4%B8%83)%20--POST%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/">Node学习(七) --POST文件上传</a>
                                        <p>
                                            简单的文件上传例子处理文件上传数据，也是前后端交互中重要的功能，它的处理方式与数据不同。
接下来，通过一个例子查看服务端接收到的文件上传数据。
首先，在post_file.html中，新建一个用与上传文件的表单：
form的属性enctype=&quot;multipart/form-data&quot;代表表单上传的是文件。
enctype的默认值为enctype=&quot;applic...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 01, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/04/01/Node/Node%E5%AD%A6%E4%B9%A0(%E5%85%AD)%20--%E5%9F%BA%E6%9C%AC%E6%A8%A1%E5%9D%97/">Node学习(六) --基本模块</a>
                                        <p>
                                            assert (断言)assert（断言）通常用来对代码进行校验，若出错则阻止程序运行，并抛出一个错误。
用法12345const assert = require('assert')assert(2 &gt; 1, '2 &gt; 1')assert(1 &gt; 2, '1 &gt; 2')
代码在运行到assert(2 &gt; 1, ‘2 &gt; 1’)时，由于2 &gt; 1为t...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">March 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 29, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/29/Vue/vue%E4%B8%ADaxios%E8%AF%B7%E6%B1%82%E7%9A%84%E5%B0%81%E8%A3%85/">vue中axios请求的封装</a>
                                        <p>
                                            前言Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理，不多BB,开搞
设置接口请求前缀一般我们开发都会有开发、测试、生产环境，前缀需要加以区分，我们利用node环境变量来作判断
12345if(process.env.NODE_ENV...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 28, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/28/Ajax/%E5%A6%82%E4%BD%95%E5%9C%A8-Web-%E5%85%B3%E9%97%AD%E9%A1%B5%E9%9D%A2%E6%97%B6%E5%8F%91%E9%80%81-Ajax-%E8%AF%B7%E6%B1%82/">如何在 Web 关闭页面时发送 Ajax 请求</a>
                                        <p>
                                            前言有时候我们需要在用户离开页面的时候，做一些上报来记录用户行为。又或者是发送服务器ajax请求，通知服务器用户已经离开，比如直播间内的退房操作。
本文主要分两部分来讲解怎么完成退出行为的上报。
事件监听浏览器有两个事件可以用来监听页面关闭，beforeunload和unload。beforeunload是在文档和资源将要关闭的时候调用的， 这时候文档还是可见的，并且在这个关闭的事件还是可以...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 27, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/27/Vue/%E3%80%8C%E4%BB%8E%E6%BA%90%E7%A0%81%E4%B8%AD%E5%AD%A6%E4%B9%A0%E3%80%8D%E9%9D%A2%E8%AF%95%E5%AE%98%E9%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84Vue%E9%A2%98%E7%9B%AE%E7%AD%94%E6%A1%88/">「从源码中学习」面试官都不知道的Vue题目答案</a>
                                        <p>
                                            原文地址
前言当回答面试官问及的Vue问题，我们除了照本宣科的回答外，其实还可以根据少量的源码来秀一把，来体现出你对Vue的深度了解。
“new Vue() 做了什么？”new关键字代表实例化一个对象, 而Vue实际上是一个类, 源码位置是/src/core/instance/index.js。
12345678function Vue (options) &#123;  if (proce...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 26, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/26/Node/Node%E5%AD%A6%E4%B9%A0(%E4%BA%94)%20--Node-js%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96/">Node学习(五) --Node.js的模块化</a>
                                        <p>
                                            Nodejs定义模块Nodejs的模块化由于出现的较早，因此它遵循的是CommonJS规范，而非ES6的模块化。
在Nodejs的模块化中，最常用到的有module对象、exports对象、require方法。
其中module和exports用于输出模块，require用于引用模块。
一个简单的模块例子先新建一个module1.js文件，代码如下：
1234module.exports.a...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 25, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/25/Node/Node%E5%AD%A6%E4%B9%A0(%E5%9B%9B)%20--%E5%A4%84%E7%90%86%E6%8E%A5%E6%94%B6%E5%88%B0%E7%9A%84POST%E6%95%B0%E6%8D%AE/">Node学习(四) --处理接收到的POST数据</a>
                                        <p>
                                            POST数据量通常较大，通常不会一次性从客户端发送到服务端，具体每次发送的大小由协议，以及客户端与服务端之间的协商决定。
因此，Nodejs在处理POST数据时，需要通过request对象的data事件，获取每次传输的数据，并在end事件调用时，处理所有获取的数据。
request对象是一个http.IncomingMessage 类，而它实现了可读流接口，因此具有了可读流的data、end...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 19, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/19/Node/Node%E5%AD%A6%E4%B9%A0(%E4%B8%89)%20--%E5%A4%84%E7%90%86%E6%8E%A5%E6%94%B6%E5%88%B0%E7%9A%84GET%E6%95%B0%E6%8D%AE/">Node学习(三) --处理接收到的GET数据</a>
                                        <p>
                                            常用请求方式GET和POST是最常用的HTTP请求方法，除此之外还有DELETE、HEAD、OPTIONS、PUT、TRACE等，但都很少用到。



GET
POST




主要用于获取数据
主要用于发送数据


数据放在HTTP请求Header中，通过URL进行传输，容量&lt;=32k
数据放在HTTP请求body中,容量大，通常上限2G



处理Get数据我们可以使用Nodejs...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 19, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/19/Node/Node%E5%AD%A6%E4%B9%A0(%E4%BA%8C)%20--%E4%BD%BF%E7%94%A8http%E5%92%8Cfs%E6%A8%A1%E5%9D%97%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E6%9C%8D%E5%8A%A1%E5%99%A8/">Node学习(二) --使用http和fs模块实现一个简单的服务器</a>
                                        <p>
                                            准备1.创建一个www目录，存储静态文件1.html、1.jpg。
* html文件内容如下：
12345678910111213&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;meta name="viewport" content="width=devic...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 18, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/18/Node/Node%E5%AD%A6%E4%B9%A0(%E4%B8%80)%20--NodeJs%E7%AE%80%E4%BB%8B/">Node学习(一) --NodeJs简介</a>
                                        <p>
                                            NodeJs简介
简单的说Node.js就是运行在服务端的Javascript
Node.js是一个基于ChromeV8引擎的Javascript的执行环境
Node.js使用了一个事件驱动，非阻塞式I/O的模型，使其轻量有高效

NodeJs的应用环境由于Nodejs目前还不够成熟，因此一般不会用作独立开发，它的主要用途如下
中间层通常在开发应用时，出于安全考虑，后端的主服务器都不会直接暴...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 16, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/16/Js/ES2019%E7%9A%84%E6%96%B0%E5%8A%9F%E8%83%BD/">ES2019的新功能</a>
                                        <p>
                                            前言ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。
ES10/ES2019 在本次更新中有很大的改进。它引入了一些新的函数和方法，使开发者能够编写更少的代码，并提高工作效率。
flat()flat() 是一种用于扁平数组的方法。在某些时候，数组的元素还是数组，这些类型的数组称为嵌套数组。
...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 14, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/14/%E6%9D%82%E6%96%87/%E6%80%8E%E4%B9%88%E6%8F%90%E9%AB%98%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F%EF%BC%9F-%E6%9D%A5%E8%87%AAGoogle%E7%9A%84%E7%A0%94%E5%8F%91%E7%BB%8F%E9%AA%8C%E6%80%BB%E7%BB%93/">怎么提高代码质量？-来自Google的研发经验总结</a>
                                        <p>
                                            原文地址
你的团队有没有过这样的经历：开发效率低，招了很多人，天天加班，出活却不多，线上bug频发，领导发飙，中层束手无策，工程师抱怨不断，查找bug困难。其实这些都是代码质量差惹的祸。代码质量是研发质量管理的根本，它决定了整个开发团队的开发效率，项目质量，其他监控，告警，日志等手段都只能是事后补偿。本文就如何保证代码质量总结了一些经验和方法，供大家参考。
代码质量本身并没有一个特别明确的量...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 12, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/03/12/Js/ES6-Class%E4%B8%AD%E7%9A%84constructor%E6%96%B9%E6%B3%95%E5%92%8Csuper%E7%9A%84%E4%BD%9C%E7%94%A8/">ES6 Class中的constructor方法和super的作用</a>
                                        <p>
                                            前言首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。
construcot12345678function Point(x, y) &#123;  this.x = x;  this.y = y;&#125;Point.prototype.toString = function() &#123;  return '('...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">January 2019</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">January 27, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/01/27/Js/30-Seconds-of-ES6-%EF%BC%88%E4%B8%80%EF%BC%89/">30 Seconds of ES6 （一）</a>
                                        <p>
                                            项目背景简介30 seconds of code  是一个非常优质精选的 JavaScript 项目 ，总结了大量的使用 ES6  语法实现的代码块，项目的设计目标就是更简洁，更高效，更快速的实现基础代码模块，碎片化学习实用干货， 30 秒掌握一个高质量 ES6 代码块 。
学习初衷学习 ES6 基础知识，提升程序算法能力；学习 JavaScript 基础从 API 开始。每篇精选 5 段优...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">January 20, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/01/20/Vue/vue-%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E9%80%9A%E4%BF%A1/">vue 组件之间的通信</a>
                                        <p>
                                            什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
Vue组件间通信常见使用场景可以分为三类:
父子组件通信: props; $parent / $children;...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">January 13, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/01/13/Vue/keep-alive%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E5%8F%8A%E5%85%B6%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86/">keep-alive组件的使用及其实现原理</a>
                                        <p>
                                            keep-alivekeep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
它提供了include与exclude两个属性，允许组件有条件地进行缓存。
具体内容可以参考官网。
用法123&lt;keep-alive&gt;    &lt;component&gt;&lt;/...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">January 06, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/01/06/Vue/Vuex%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/">Vuex源码解析</a>
                                        <p>
                                            前言我们在使用Vue.js开发复杂的应用时，经常会遇到多个组件共享同一个状态，亦或是多个组件会去更新同一个状态，在应用代码量较少的时候，我们可以组件间通信去维护修改数据，或者是通过事件总线来进行数据的传递以及修改。但是当应用逐渐庞大以后，代码就会变得难以维护，从父组件开始通过prop传递多层嵌套的数据由于层级过深而显得异常脆弱，而事件总线也会因为组件的增多、代码量的增大而显得交互错综复杂，难...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">January 01, 2019</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2019/01/01/Vue/Vue-js%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0DOM%E7%AD%96%E7%95%A5%E5%8F%8AnextTick/">Vue.js异步更新DOM策略及nextTick</a>
                                        <p>
                                            操作DOM在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样：
123456&lt;template&gt;  &lt;div&gt;    &lt;div ref="test"&gt;&#123;&#123;test&#125;&#125;&lt;/div&gt;    &lt;button @click="handleClick"&gt;tet&lt;/...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">December 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">December 16, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/12/16/Vue/Vue%E4%BA%8B%E4%BB%B6API/">Vue事件API</a>
                                        <p>
                                            Vue事件API众所周知，Vue.js为我们提供了四个事件API，分别是$on，$once，$off，$emit。
初始化事件初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：
123&#123;    eventName: [func1, func2, func3]&#125;
存放事件名以及对应执行方法。
12345678910111213/*初始化事...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">December 09, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/12/09/Vue/vue%E6%BA%90%E7%A0%81%E4%B9%8B%E4%BB%8E%E6%BA%90%E7%A0%81%E8%A7%92%E5%BA%A6%E5%86%8D%E7%9C%8B%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A/">vue源码之从源码角度再看数据绑定</a>
                                        <p>
                                            原文地址
前文前面已经讲过Vue数据绑定的原理了，现在从源码来看一下数据绑定在Vue中是如何实现的。
首先看一下Vue.js官网介绍响应式原理的这张图。

这张图比较清晰地展示了整个流程，首先通过一次渲染操作触发Data的getter（这里保证只有视图中需要被用到的data才会触发getter）进行依赖收集，这时候其实Watcher与data可以看成一种被绑定的状态（实际上是data的闭包中...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">December 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/12/02/Vue/Vu%E6%BA%90%E7%A0%81%E4%B9%8B%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86/">Vu源码之依赖收集</a>
                                        <p>
                                            为什么要依赖收集？先看这段代码
123456789101112new Vue(&#123;    template:         `&lt;div&gt;            &lt;span&gt;text1:&lt;/span&gt; &#123;&#123;text1&#125;&#125;            &lt;span&gt;text2:&lt;/span&gt; &...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">November 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">November 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/11/25/Vue/vue-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86/">vue 源码分析之响应式原理</a>
                                        <p>
                                            原文地址
关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">November 18, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/11/18/Js/JavaScript-%E5%A4%8D%E6%9D%82%E5%88%A4%E6%96%AD%E7%9A%84%E6%9B%B4%E4%BC%98%E9%9B%85%E5%86%99%E6%B3%95/">JavaScript 复杂判断的更优雅写法</a>
                                        <p>
                                            原文地址
前言我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。
举个例子12345678910111213141516171819202122232425/** * 按钮点击事件 ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">November 04, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/11/04/HTTP/websocket%E9%80%9A%E4%BF%A1%E4%BA%86%E8%A7%A3/">websocket通信了解</a>
                                        <p>
                                            websocketwebsocket是HTML5出的协议，他是一个持久化的协议。
websocket是什么样的协议，有什么与优点？首先websocket是一个持久化的协议，在HTTP中一个request只能有一个response,而且这个response也是被动的，不能主动发起。
下面是用websocket请求的header头
1234567891011GET /chat HTTP/1.1H...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">November 04, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/11/04/Js/call-stack/">call stack</a>
                                        <p>
                                            Call Stack(调用堆栈)MDN(解释call Stack)


A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple func...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">October 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">October 21, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/10/21/Vue/%E5%88%9D%E5%AD%A6%E8%80%85%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84vue%E6%8A%80%E5%B7%A7/">初学者可能不知道的vue技巧</a>
                                        <p>
                                            技巧/坑点setTimeout/ setInterval
场景一 ：this指向改变无法用this访问vue实例

123456mounted()&#123;  setTimeout( function () &#123;  //setInterval同理  console.log(this); //此时this指向Window对象  &#125;，1000) ;&#125;

解决方法 :...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">August 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 26, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/26/%E6%9D%82%E6%96%87/CSS%E5%AF%B9%E6%AF%94-JavaScript%E5%8A%A8%E7%94%BB/">CSS对比 JavaScript动画</a>
                                        <p>
                                            前言在网页上创建动画有两种主要方法：使用 CSS 和使用 JavaScript。您选择哪种方法实际上取决于项目的其他依赖关系，以及您尝试实现什么类型的效果。

TL;DR


使用 CSS 动画来实现较简单的“一次性”转换，例如切换 UI 元素状态。
当您需要高级效果（例如弹跳、停止、暂停、倒退或减速）时，请使用 JavaScript 动画。
如果选择使用 JavaScript 来编写动画，...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 21, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/21/React/React-saga/%E4%BD%BF%E7%94%A8-Redux-Saga-%E7%AE%A1%E7%90%86-React-%E5%BA%94%E7%94%A8%E4%B8%AD%E7%9A%84%E5%BC%82%E6%AD%A5-action-%EF%BC%88%E4%B8%8A%EF%BC%89/">使用 Redux-Saga 管理 React 应用中的异步 action （上）</a>
                                        <p>
                                            前言可以用Don’t call me, I’ll call you这句话来比喻react-saga。
Generators 先行！为了理解 Sagas，我们首先要理解什么是 Generator。下面是 MDN 对 Generator 的描述：

Generator 是在执行时能暂停，后面又能从暂停处继续执行的函数。它的上下文会在继续执行时保存。

你可以把 Generator 理解成一种遍历...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 20, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/20/Js/Javascript%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%EF%BC%88generator%E5%92%8Casync%EF%BC%89/">Javascript异步编程(generator和async)</a>
                                        <p>
                                            前言从Promise开始，JavaScript就在引入新功能，来帮助更简单的方法来处理异步编程，帮助我们远离回调地狱。Promise是下边要讲的Generator/yield与async/await的基础，希望你已经提前了解了它。
在大概ES6的时代，推出了Generator/yield两个关键字，使用Generator可以很方便的帮助我们建立一个处理Promise的解释器。
然后，在ES7...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 13, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/13/React/%E6%88%91%E5%AF%B9React-v16-4%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E7%90%86%E8%A7%A3/">我对React v16.4生命周期的理解</a>
                                        <p>
                                            react v16.3生命周期
react v16.4生命周期
React v16要废除的三个生命周期函数

componentWillMount
componentWillReceiveProps
componentWillUpdate


注：目前在16版本中componentWillMount，componentWillReceiveProps，componentWillUpdate并...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 10, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/10/HTTP/%E5%89%8D%E7%AB%AF%E5%B8%B8%E8%A7%81%E7%AE%97%E6%B3%95Js%E5%AE%9E%E7%8E%B0/">前端常见算法Js实现</a>
                                        <p>
                                            快速排序1var arr = [2,53,53.2,1,1223,5,2,675,967,2,1231,9344,3855,1];
冒泡排序原理：比较相邻的两个元素，比较大的放置右端
12345678910111213141516function bubbleSort(arr)&#123;    var i = j =0    for(var i = 1;i &lt; arr.length;...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 07, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/07/Js/%E7%94%A8canvas%E5%8E%8B%E7%BC%A9%E4%B8%8A%E4%BC%A0%E7%9A%84%E5%9B%BE%E7%89%87/">用canvas压缩上传的图片</a>
                                        <p>
                                            前言现在摄像头已经是手机的标配了，移动网站也做得越来越像APP。然而拍照上传这件事情的体验似乎仍然不如APP，主要原因是现在手机拍摄的照片太大，上传非常消耗流量也非常耗时。APP都会在上传前缩小要上传的照片尺寸，以期更节省流量和时间。在HTML5时代，利用文件API和Canvas技术，Web上也可以做到图片压缩上传。
过滤文件类型首先我们希望用户能直接选择手机照片，而不是在各种类型的文件中选...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 05, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/05/Js/JavaScript%E4%B8%AD%E7%9A%84%E2%80%9Cthis%E2%80%9D%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/">JavaScript中的“this”是什么？</a>
                                        <p>
                                            
原文：What is “this” in JavaScript?

前言如果你曾使用JavaScript库做过开发，那么你可能已经注意到一个名为 this的特定关键字。虽然 this在JavaScript中非常常见，但是完全理解this关键字的原理以及在代码中如何使用对相当一部分的开发者来说着实不易。在这篇文章中，我将帮你深入理解 this及其工作机制。在开始之前，请确保已安装 Node。...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/03/Tools/%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAplugin/">编写一个plugin</a>
                                        <p>
                                            前言Webpack 通过 Plugin 机制让其更加灵活，以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
最基础的 Plugin一个最基础的 Plugin 的代码是这样的：
1234567891011121314class BasicPlugin&#123;  // ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/03/Tools/%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAloader/">编写一个loader</a>
                                        <p>
                                            前言Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。

以处理 SCSS 文件为例：

SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS；把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；把 css-loader 输出的 CSS...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/03/%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/webpack%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE%9E%E7%8E%B0/">webpack原理及实现</a>
                                        <p>
                                            工作原理概括Webpack 以其使用简单著称，在使用它的过程中，使用者只需把它当作一个黑盒，需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒，看看 Webpack 是如何运行的。
基本概念
在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：


entry: 入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
module: 模块，...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">August 01, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/08/01/HTTP/%E4%BD%BF%E7%94%A8-Intersection-Observer-%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD/">使用 Intersection Observer 实现图片延迟加载</a>
                                        <p>
                                            
延迟加载有什么大不了的？延迟加载图片的目的在于，在发出对应的网络请求之前你要一直等到用户滚动页面让图片进入可见区域。如果你的网页包括了多张图片，但你只在每张图片滚动到视区时才加载，你将最终会节省带宽并确保你的网页加载的更快。
为了让你在实际中了解这一点，让我们想象下面这个页面，他有三张图片。

如果用户访问页面时仅看到了第一张图，我们并不想加载网页底部的比萨图片，除非用户向下滚动直到图片真...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">July 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/27/study/fetch%E4%BD%BF%E7%94%A8%E7%9A%84%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/">fetch使用的常见问题及解决办法</a>
                                        <p>
                                            前言说道fetch就不得不提XMLHttpRequest了，XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调，尽管开发者只关心请求成功后的业务处理，但是也要配置其他繁琐内容，导致配置和调用比较混乱，也不符合关注分离的原则；fetch的出现正是为了解决XHR存在的这些问题。例如下面代码：
1234567fetch(url).then(function(response)&#12...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/25/study/JavaScript%E6%A8%A1%E5%9D%97%E5%8C%96-Commonjs%E3%80%81AMD%E3%80%81CMD%E3%80%81ES6-modules/">JavaScript模块化 --- Commonjs、AMD、CMD、ES6 modules</a>
                                        <p>
                                            前言随着前端js代码复杂度的提高，JavaScript模块化这个概念便被提出来，前端社区也不断地实现前端模块化，直到es6对其进行了规范，下面就介绍JavaScript模块化。
JavaScript模块化是如何一步一步地发展起来的，并且也会主要对这些模块化方式做一个简单的比较。
第一阶段：无模块化JavaScript最初的作用仅仅是验证表单，后来会添加一些动画，但是这些js代码很多在一个文件...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/23/CSS3/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3BFC-IFC-GFC%E5%92%8CFFC/">深入理解BFC,IFC,GFC和FFC</a>
                                        <p>
                                            前言BFC,IFC,IFC,FFF是什么，主要解决的什么问题，哪些元素会生成BFC？本文主要针对这几个问题来了解。在解释之前，需要先介绍 Box、Formatting Context的概念。

Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 19, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/19/React/%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BA%86%E8%A7%A3setState%E5%90%97%EF%BC%9F/">你真的了解setState吗？</a>
                                        <p>
                                            
前言看之前，为了方便理解和简化流程，我们默认react内部代码执行到 performWork、performWorkOnRoot、performSyncWork、performAsyncWork 这四个方法的时候，就是react去update更新并且作用到UI上。
合成事件中的setState首先得了解一下什么是合成事件，react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 18, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/18/study/Ajax-Fetch-Axios%E4%B9%8B%E9%97%B4%E7%9A%84%E8%AF%A6%E7%BB%86%E5%8C%BA%E5%88%AB%E4%BB%A5%E5%8F%8A%E4%BC%98%E7%BC%BA%E7%82%B9/">Ajax Fetch Axios之间的详细区别以及优缺点</a>
                                        <p>
                                            将jQuery的ajax、axios和fetch做个简单的比较，所谓仁者见仁智者见智，最终使用哪个还是自行斟酌
jQuery ajax12345678$.ajax(&#123;   type: 'POST',   url: url,   data: data,   dataType: dataType,   success: function () &#123;&#125;,   error...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 17, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/17/Js/%E9%80%9A%E8%BF%87%E7%A4%BA%E4%BE%8B%E6%9D%A5%E5%AD%A6%E4%B9%A0ES2016-2017-2018%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7/">通过示例来学习ES2016, 2017, 2018的新特性</a>
                                        <p>
                                            
前言本文会辅以有用的例子来讲述TC39中的18个特性，它们分别在ES2016, ES2017和ES2018中加入。鉴于本文内容很长，我们将分为两个部分来介绍，此为第一部分。
ES6Array.prototype.includesincludes是一个Array上很有用的函数，用于快速查找数组中是否包含某个元素。(包括NaN，所以和indexOf不一样)。

指数函数的中缀形式加/减法我们通...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 13, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/13/HTTP/%E3%80%8A%E5%9B%BE%E8%A7%A3HTTP%E5%AD%A6%E4%B9%A0%E3%80%8B%E7%AC%94%E8%AE%B0/">《图解HTTP学习》笔记</a>
                                        <p>
                                            从一道题引发的思考从输入网页到呈现网页页面这一过程经历了什么？
HTTP的诞生在深入了解HTTP之前，先介绍HTTP诞生的背景。cern的timbernersLee 提出一种能让远隔两地的研究者们共享知识点的设想。
网络基础 TCP/IP通常使用的网络（包括互联网）是在TCP/IP协议族的基础上运作的。而HTTP属于它内部的一个子集。
TCP/IP协议族按层次分为以下4层

应用层
应用层决...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 10, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/10/HTTP/%E4%BB%8E%E8%BE%93%E5%85%A5url%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA%E5%88%B0%E5%BA%95%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88/">从输入url到页面展示到底发生了什么</a>
                                        <p>
                                            前言刚开始写这篇文章还是挺纠结的，因为网上搜索“从输入url到页面展示到底发生了什么”，你可以搜到一大堆的资料。而且面试这道题基本是必考题，二月份面试的时候，虽然知道这个过程发生了什么，不过当面试官一步步追问下去的，很多细节就不太清楚了。
　　最近刚好也在看http协议相关的东西，所以想对这个话题来个深入的总结，本文的目的是 通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 06, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/06/Js/%E5%B0%81%E9%97%AD%E4%BA%86%E5%86%85%E5%BF%83%E5%8D%B4%E5%8C%85%E5%AE%B9%E4%BA%86%E5%A4%A9%E4%B8%8B%EF%BC%8C%E9%97%AD%E5%8C%85%E4%BD%A0%E5%B9%B6%E4%B8%8D%E5%AD%A4%E7%8B%AC/">封闭了内心却包容了天下，闭包你并不孤独</a>
                                        <p>
                                            前言本文之所以会写这种老生常谈的文章，是为了接下来的设计模式做铺垫。既然已经提笔了，就打算不改了，继续写下去，相信也一定有很多人对闭包这样的概念有些模糊，那就瞧一瞧、看一看
毕竟闭包和高阶函数这两种概念，在开发中是非常有分量的。好处多多，妙处多多，那么我们就不再兜圈子了，直接开始今天的主题，闭包&amp;高阶函数
变量作用域首先变量作用域分为两类：全局作用域和局部作用域，这个没话说大家都懂。...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">July 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/07/02/Js/%E4%BD%A0%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%8423%E7%A7%8Djavascript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">你需要了解的23种javascript设计模式</a>
                                        <p>
                                            为什么要学习设计模式？在许多访谈中，你可能会遇到很多面向对象编程中的接口，抽象类，代理和以及其他与设计模式相关的问题。 一旦了解了设计模式，它会让你轻松应对任何访谈，并可以在你的项目中应用这些特性。在应用程序中实现设计模式已经得到验证和测试。
为了使应用程序具有可扩展性，可靠性和易维护性，应该编写符合设计模式的代码。
什么是设计模式
设计模式是我们每天编程遇到的可重用解决方案。
设计模式主要...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">June 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 28, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/06/28/study/Airbnb-React-JSX-%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/">Airbnb React/JSX 编码规范</a>
                                        <p>
                                            前言算是最合理的React/JSX编码规范之一了
此编码规范主要基于目前流行的JavaScript标准，尽管某些其他约定(如async/await，静态class属性)可能在不同的项目中被引入或者被禁用。目前的状态是任何stage-3之前的规范都不包括也不推荐使用。
Basic Rules 基本规范每个文件只写一个模块.但是多个无状态模块可以放在单个文件中. eslint: react/no...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 21, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/06/21/study/%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%AE%9E%E7%8E%B0%E4%B8%8Ereact-router%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/">前端路由实现与react-router源码分析</a>
                                        <p>
                                            前言在单页应用上，前端路由并不陌生。很多前端框架也会有独立开发或推荐配套使用的路由系统。那么，当我们在谈前端路由的时候，还可以谈些什么？本文将简要分析并实现一个的前端路由，并对 react-router 进行分析。
一个极简前端路由实现谈一下前端路由的简要原理，以hash形式（也可以使用History API做处理）为例，当url的hash发生变化时，触发hashchange注册的回调，在回...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 08, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/06/08/Mobile/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B8%B8%E8%A7%81Bug%E6%B1%87%E6%80%BB/">移动端常见Bug汇总</a>
                                        <p>
                                            前言本文是摘录整理了移动端常见的一些bug以及解决方案
点击样式闪烁Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,in...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">June 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/06/03/study/%E6%95%99%E7%A7%91%E4%B9%A6%E5%BC%8F%E7%9A%84%E6%AD%A3%E5%88%99%E5%8C%B9%E9%85%8D/">教科书式的正则匹配</a>
                                        <p>
                                            前言

正则在js中是一类比较特殊的对象，它可以匹配各个场景需要的格式验证，例如邮箱、手机号、用户登录名、密码等等，似乎无处不在，在常见的字符串检索或替换中，我们需要提供一种模式表示检索或替换的规则，来匹配一系列符合某个句法规则的字符串。

以下是正则的较为官方的解释：

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">May 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/27/study/%E6%96%B0%E4%B8%80%E4%BB%A3%E7%9A%84%E5%89%8D%E7%AB%AF%E5%AD%98%E5%82%A8%E6%96%B9%E6%A1%88-indexedDB/">新一代的前端存储方案--indexedDB</a>
                                        <p>
                                            前端存储
我们都知道在前端开发当中,有时会因为某些需求,要将一些数据存储在前端本地当中.比如说:为了优化性能,将一些常用的数据存在本地,这样以后需要的时候直接从本地拿,不需要再向后端进行请求.还有就是为了防止CSRF攻击,后端给前端一个token,前端就需要将这个token存在本地.之后每次请求都需要带上这个token.等等不一而足.
而这些需求就不油避免的造就一个前端的发展方向–前端存储
...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/23/study/Token%EF%BC%9A%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81%E7%9A%84%E6%B5%81%E8%A1%8C%E6%96%B9%E6%A1%88/">Token：服务端身份验证的流行方案</a>
                                        <p>
                                            身份认证服务端提供资源给客户端，但是某些资源是有条件的。所以服务端要能够识别请求者的身份，然后再判断所请求的资源是否可以给请求者。
token是一种身份验证的机制，初始时用户提交账号数据给服务端，服务端采用一定的策略生成一个字符串（token），token字符串中包含了少量的用户信息，并且有一定的期限。服务端会把token字符串传给客户端，客户端保存token字符串，并在接下来的请求中带上这...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 21, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/21/%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/promise%E7%9A%84%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/">promise的原理</a>
                                        <p>
                                            前言先上一图!
本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promise/A+规范中文翻译）
引子为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。
考虑下面一种获取用户id的请求处理
1234567891011function getUrlId() &#123;    return new Promis...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 20, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/20/Js/%E5%85%AB%E6%AE%B5%E4%BB%A3%E7%A0%81%E5%BD%BB%E5%BA%95%E6%8E%8C%E6%8F%A1-Promise/">八段代码彻底掌握 Promise</a>
                                        <p>
                                            PromisePromise的立即执行性1234567891011//1var p = new Promise(function(resolve, reject)&#123;  console.log("create a promise");  resolve("success");&#125;);//2console.log("after new Promise");//3p.then(f...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 19, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/19/React/%E7%B2%BE%E8%AF%BB-React-%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/">精读 React 高阶组件</a>
                                        <p>
                                            引言高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种 React 组件的设计理念，众多的 React 库已经证明了它的价值，例如耳熟能详的 react-redux。
高阶组件的概念其实并不难，我们能通过类比高阶函数迅速掌握。高阶函数是把函数作为参数传入到函数中并返回一个新的函数。...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 17, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/17/Js/%E5%9B%BE%E8%AF%B4ES-Modules/">图说ES Modules</a>
                                        <p>
                                            前言原文：ES modules: A cartoon deep-dive, Lin Clark
ES modules（ESM） 是 JavaScript 官方的标准化模块系统。然而，它在标准化的道路上已经花费了近 10 年的时间。
可喜的是，标准化之路马上就要完成了。等到 2018 年 5 月 Firefox 60 发布之后，所有的主流浏览器就都支持 ESM 了。同时，Node 模块工作小组...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 05, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/05/%E6%9D%82%E6%96%87/MVC-MPC-MVVM%E5%9B%BE%E7%A4%BA/">MVC,MPC,MVVM图示</a>
                                        <p>
                                            MVC,MPC,MVVM区别MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。
MVCMVC模式的意思是，软件可以分成三个部分


M(Model) 数据保存—将新的数据发送到 View，用户得到反馈
V(View) 用户界面—View 传送指令到 Contro...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 04, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/04/%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/Ajax%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/">Ajax原理与实现</a>
                                        <p>
                                            概述AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
原理与实现
原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

把服务器端看成一个数据接口(只负责吐数据)，它返回的是一个纯...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/03/%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/Jsonp%E7%9A%84%E5%8E%9F%E7%90%86%E4%B8%8E%E5%AE%9E%E7%8E%B0/">Jsonp的原理与实现</a>
                                        <p>
                                            概述Jsonp是一种跨域通信的手段，它的原理实现很简单：

1.首先利用script标签的src属性来实现跨域
2.通过将前端方法作为参数传给服务器端，由服务器端注入参数之后再返回，实现服务器端向客户端通信
3.由于使用script的src属性，所以只支持get方法

实现流程1.设定一个script标签
1&lt;script src="http://jsonp.js?callback=x...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/02/study/%E4%BB%80%E4%B9%88%E6%98%AF%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/">什么是函数式编程</a>
                                        <p>
                                            Functional programming你可能听说过函数式编程（Functional programming），甚至已经使用了一段时间。
但是，你能说清楚，它到底是什么吗

网上搜索一下，你会轻松找到好多答案。

与面向对象编程和过程式编程并列的编程范式主要的特征：函数是第一等公民强调将计算过程分解成可复用的函数，典型的例子就是map函数和reduce函数组成的MapReduce函数只有...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">May 01, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/05/01/Js/%E5%B0%81%E8%A3%85%E5%B8%B8%E7%94%A8%E7%9A%84%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1EventUtil/">封装常用的跨浏览器的事件对象</a>
                                        <p>
                                            前言最近把《javascript高级程序设计》看完了，发现里面有很多跨浏览器的代码，总结一下，方便记录。
跨浏览器的事件对象EventUtil(事件处理程序)1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">April 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 30, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/30/React/React-V16-3-%E5%8D%B3%E5%B0%86%E6%9B%B4%E6%94%B9%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/">React V16.3 即将更改的生命周期</a>
                                        <p>
                                            即将更改的生命周期一年多来，React团队一直致力于实现异步渲染。上个月，他在JSConf冰岛的演讲中，丹揭示了一些令人兴奋的新的异步渲染可能性。现在，我们希望与您分享我们在学习这些功能时学到的一些经验教训，以及一些帮助您准备组件以在启动时进行异步渲染的方法。
我们了解到的最大问题之一是，我们的一些传统组件生命周期会导致一些不安全的编码实践。他们是：

componentWillMount
...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 29, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/29/Js/Javascript-%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B/">Javascript 异步编程</a>
                                        <p>
                                            为什么JavaScript的异步编程经常被人提起，我想到以下两点原因。首先，JavaScript是单线程的，用事件循环的机制来保证系统的正常运行。如果有同步的ajax请求或者很复杂的运算，JavaScript要等这些操作完成，才能响应其他事件，页面会进入假死状态。然而对于日渐复杂的web应用来说，这个是致命的。这也是为什么Node.js适合高I/O操作的业务，而像PHP，直到现在，I/O操作...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 28, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/28/Node/%E6%90%AD%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AAExpress%E5%BA%94%E7%94%A8/">搭建你的第一个Express应用</a>
                                        <p>
                                            Express介绍
Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用
丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单
Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能

使用 Express 可以快速地搭建一个完整功能的网...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 26, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/26/%E6%9D%82%E6%96%87/2017-%E5%B9%B4%E5%B4%9B%E8%B5%B7%E7%9A%84-JS-%E9%A1%B9%E7%9B%AE/">2017 年崛起的 JS 项目</a>
                                        <p>
                                            最受欢迎项目下面是不分类别的 2017 年度最受欢迎 Javascript 项目，如果你时间很紧，看这部分就够了。
Vue.js 蝉联冠军
Vue.js 再次强势登顶年度排行榜冠军，今年在 GitHub 上新增了超过 40K 的 star。相较于 2016 年的（26K star），今年 Vue.js 领先排行榜第 2 名（ React ）的优势更大了。

那么，是什么令 Vue.js 如此...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/25/React/Redux/redux%E5%AD%A6%E4%B9%A0%E4%B9%8B%E5%8D%87%E7%BA%A7%E6%B0%B4%E6%9E%9C%E5%BA%97%E9%9D%A2/">redux学习之升级水果店面</a>
                                        <p>
                                            优雅的处理 async action阿大通过请了一个采购员完成了耗时的进口商品的售卖。
但是，阿大同时也发现了一个问题：顾客要买水果生鲜的话需要找销售员，要买进口水果生鲜的话要找采购员，这样的话，顾客需要找不同的人，很麻烦。阿大想了想，能不能让顾客只找销售员，然后销售员如果有需求再找采购员采购呢。
阿大想到了办法，让销售员把所有的需求都告诉采购员，然后采购员再传递给收银员，这样，如果是需要采...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/25/React/Redux/redux%E5%AD%A6%E4%B9%A0%E4%B9%8B%E5%BC%80%E5%BA%97%E5%8D%96%E6%B0%B4%E6%9E%9C/">redux学习之开店卖水果</a>
                                        <p>
                                            Redux 是什么每当我们谈及到 redux，大家都会说是 react 的状态管理工具。这么说确实没错，毕竟 redux 项目也是 React Community 组织下的一个子项目。而且 redux 的诞生也是和 react 这个 ui 库急需一个状态管理解决方案有很大的联系。但是 redux 和 react 并没有任何的耦合。虽然它们经常一起用，但是 redux 的用途并不局限于 rea...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 24, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/24/%E6%80%A7%E8%83%BD/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E8%B8%A9%E5%9D%91/">图片懒加载踩坑</a>
                                        <p>
                                            原理对网页加载速度影响最大的就是图片，一张普通的图片可能会有好几 M 的大小，当图片很多时，网页的加载速度变得很缓慢。为了优化网页性能以及用户体验，我们对图片进行懒加载。

懒加载是一种对网页性能优化的方式，它的原理是优先加载在可视区域内的图片，而不一次性加载所以图片。当浏览器滚动，图片进入可视区时再去加载图片。通过设置图片的 src 属性来让浏览器发起图片的请求。当这个属性为空或者没有时，...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/23/%E6%80%A7%E8%83%BD/WEB%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BA%BA%E5%91%98%E9%A1%BB%E7%9F%A5%E7%9A%84%E5%B8%B8%E8%A7%81%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%8A%80%E5%B7%A7/">WEB前端开发人员须知的常见浏览器兼容问题及解决技巧</a>
                                        <p>
                                            为什么会有兼容问题？由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。
使用Trident内核的浏览器：IE、Maxthon、TT； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox； 使用Presto内核的浏览器：Opera...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/23/Interview/%E6%AF%8F%E4%B8%AA-JavaScript-%E5%B7%A5%E7%A8%8B%E5%B8%88%E9%83%BD%E5%BA%94%E5%BD%93%E7%9F%A5%E9%81%93%E7%9A%84-10-%E4%B8%AA%E9%9D%A2%E8%AF%95%E9%A2%98/">每个 JavaScript 工程师都应当知道的 10 个面试题</a>
                                        <p>
                                            能说出来两种对于 JavaScript 工程师很重要的编程范式么？JavaScript 是一门多范式（multi-paradigm）的编程语言，它既支持命令式（imperative）/面向过程（procedural）编程，也支持面向对象编程（OOP，Object-Oriented Programming），还支持函数式编程（functional programming）。JavaScript...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 22, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/22/%E6%80%A7%E8%83%BD/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E7%B2%BE%E7%B2%B9%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E4%B8%8E%E7%BC%93%E5%AD%98/">前端工程精粹（一）：静态资源版本更新与缓存</a>
                                        <p>
                                            每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题。我们有雅虎14条性能优化原则，还有两本很经典的性能优化指导书：《高性能网站建设指南》、《高性能网站建设进阶指南》。经验丰富的工程师对于前端性能优化方法耳濡目染，基本都能一一列举出来。这些性能优化原则大概是在7年前提出的，对于web性能优化至今都有非常重要的指导意义。

然而，对于构建大型web应用的团队来说，要坚...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 20, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/20/Js/%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84JSON-parse-%E5%92%8CJSON-stringify-%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7/">你不知道的JSON.parse()和JSON.stringify()高级技巧</a>
                                        <p>
                                            前言JSON对象的两个方法：JSON.parse() 和 JSON.stringify() 通常用做JSON对象和字符串之间的相互转换;
JSON.parse()JSON.parse() 可以接受第二个参数，它可以在返回之前转换对象值。比如这例子中，将返回对象的属性值大写：
12345678910111213141516const user = &#123;  name: 'John',  ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 19, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/19/Record/%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83-JS%E7%AF%87/">前端代码规范-JS篇</a>
                                        <p>
                                            更多前端代码规范请移步

如果是个人或者小作坊开发，其实这些所谓的编码规范也没啥意思，因为大家写好的代码直接就给扔到网上去了，很少有打包、压缩、校检等过程，别人来修改你代码的情况也比较少。但是，对于一定规模的团队来说，这些东西还是挺有必要的！一个是保持代码的整洁美观，同时良好的代码编写格式和注释方式可以让后来者很快地了解你代码的大概思路，提高开发效率。
不规范写法举例
句尾没有分号1var ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 18, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/18/Record/%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83-CSS%E7%AF%87/">前端代码规范-CSS篇</a>
                                        <p>
                                            tab键用（必须）四个空格代替　　因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）。
每个样式属性后（必须）加 “;”方便压缩工具&quot;断句&quot;。
Class命名中（禁止）出现大写字母，（必须）采用” - “对class中的字母分隔，如：1234567891...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 17, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/17/Tools/webpack3-%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83/">webpack3,从入门到放弃</a>
                                        <p>
                                            前言
首先，这篇文章是根据 webpack 版本 (即 v3.4.1) 撰写，较长一段时间内无需担心过时的问题。其次，这应该会是一篇极长的文章，涵盖了基本的使用方法，有更高级功能的需求可以参考官方文档继续学习。再次，即使是基本的功能，也内容繁多，我尽可能地解释通俗易懂，将我学习过程中的疑惑和坑一一解释，如有纰漏，敬请雅正。再次，为了清晰有效地讲解，我会演示从零编写 demo，只要一步步跟着做...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 16, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/16/Interview/JS%E9%AB%98%E7%BA%A7%E4%B9%8B%E9%9D%A2%E8%AF%95%E5%BF%85%E9%A1%BB%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E4%B8%AA%E7%82%B9/">JS高级之面试必须知道的几个点</a>
                                        <p>
                                            函数的3种定义函数声明12345//ES5function getSum()&#123;&#125;function ()&#123;&#125;//匿名函数//ES6()=&gt;&#123;&#125;//如果&#123;&#125;内容只有一行&#123;&#125;和return关键字可省,
函数表达式（字面量形式）1234//ES5var sum=function getSum()...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 15, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/15/React/React-Redux-React-redux/">React,Redux,React-redux</a>
                                        <p>
                                            Reactreact一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可，那什么时候需要引入Redux呢？
当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是A –&gt; B，但随着业务复杂度的增加，有可能是这样的：A –&gt; B –&gt; C –&gt; D –&gt; E，E需要的数据需要从A那里通过props传递过来，以及对应的E...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 14, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/14/Js/%E6%9C%80%E5%BC%BA%E6%97%A5%E6%9C%9F%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">最强日期正则表达式</a>
                                        <p>
                                            简单的日期判断（YYYY/MM/DD）：1^\d&#123;4&#125;(\-|\/|\.)\d&#123;1,2&#125;\1\d&#123;1,2&#125;$
演化的日期判断（YYYY/MM/DD| YY/MM/DD）1^(^(\d&#123;4&#125;|\d&#123;2&#125;)(\-|\/|\.)\d&#123;1,2&#125;\3\d&#123;1,2&#125;...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 13, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/13/Js/jQuery-%E4%B8%8E-Zepto%E7%9A%84%E5%8C%BA%E5%88%AB/">jQuery 与 Zepto的区别</a>
                                        <p>
                                            
jQuery 的意义是在于抹平 DOM、BOM、CSSOM 的多浏览器差异，并统一提供接口。它不能当作 Framework（框架）被使用，而是扮演 Utility（工具）的角色。

虽然 Zepto 和 jQuery 的中的很多 API 的用法是相似的，但仍有一些 API 在用法上差异很大。下面就实际使用中遇到的场景做一下列举。
创建DOM节点并赋与属性使用 $ 操作符可以轻松创建节点并赋...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 12, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/12/Js/Es6%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B-%E8%BF%9B%E9%98%B6%E7%AF%87/">Es6你可能不知道的事---进阶篇</a>
                                        <p>
                                            正文Module模块化是一个进行很久的话题，发展历程中出现过很多模式，例如AMD,CommonJS等等。
Module是ES6的一个新特性，是语言层面对模块化的支持。

与之前模块加载机制不同，Module是动态加载，导入的变量的只读引用，而不是拷贝。

123456789101112131415161718192021222324// 1. export default 可以做默认导出//...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 11, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/11/Js/Es6%E4%BD%A0%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B-%E5%9F%BA%E7%A1%80%E7%AF%87/">Es6你可能不知道的事---基础篇</a>
                                        <p>
                                            ES6，或许应该叫 ES2015（2015 年 6 月正式发布），对于大多数前端同学都不陌生。
正文let + const这个大概是开始了解 ES6 后，我们第一个感觉自己完全明白并兴致勃勃的开始使用的特性。12345678910111213141516// 定义常量const REG_GET_INPUT = /^\d&#123;1,3&#125;$/;// 定义配置项let config ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 09, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/09/Js/%E4%BB%80%E4%B9%88%E6%98%AF%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87/">什么是作用域和执行上下文</a>
                                        <p>
                                            作用域首先我们说下作用域，简单地来说作用域指的是一个区域，里面包括变量，函数，常量等等定义信息和赋值信息，以及这个区域内代码书写的结构信息。作用域可以嵌套，我们通常知道js函数内是可以产生作用域的。下面我们用具体代码来示例下：

全局作用域（global scope）里面定义了两个变量，一个函数。walk 函数生成的作用域里面定义了一个变量，两个函数。innerFunc 和 anotherI...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 08, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/08/React/props-%E5%92%8C-state-%E7%9A%84%E5%8C%BA%E5%88%AB/">props 和 state 的区别 </a>
                                        <p>
                                            react是基于状态实现对DOM控制和渲染。组件状态可分为两种：一种是组件间的状态传递，另一种是组件的内部状态。这两种状态使用props和state表示。props用于父组件向子组件的数据传递，组件内部也有自己的状态：state，这些状态只能在组件内部修改。
数据流与propsreact的数据流是单向的，只会从父组件传递到子组件。属性props（properties）是父子组件进行传递状态的...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 04, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/04/React/React%EF%BC%9A%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/">React：组件生命周期</a>
                                        <p>
                                            在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。
一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。
实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
1、getDefaultProps2、getInitialState  
1、2步骤使用Es6语...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/03/React/Context-API%E8%AF%A6%E8%A7%A3/">Context API详解</a>
                                        <p>
                                            React在版本16.3-alpha里引入了新的Context API，社区一片期待之声。我们先通过简单的例子，看下新的Context API长啥样，然后再简单探讨下新的API的意义。
Demo地址
看下新的Context API需要安装16.3-alpha版本的react。下面，直接来看代码，如果用过react-redux应该会觉得很眼熟。首先，创建context实例：
12345678i...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/02/React/react-16-3%E6%96%B0%E7%89%B9%E6%80%A7/">react 16.3新特性</a>
                                        <p>
                                            Context APIContext API总是很让人迷惑。这个API是官方的，但是官方又不希望开发者们使用这个API，说是这个API会在以后发生改变。现在就是那个改变的时刻。新的API已经被merge了。而且它看起来更加的“用户友好”了。尤其是你不得不使用redux、mobx的时候，可以选择新的Context API实现更加简单的状态管理。
新的API用起来非常的简单：React.crea...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/02/HTTP/%E7%AE%80%E8%BF%B0HTTP%E5%8D%8F%E8%AE%AE/">简述HTTP协议</a>
                                        <p>
                                            什么是HTTP协议协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器
1.超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的网络协议之一，所有的WWW文件必须遵循这个标准。
2.HTTP是客户端与服务...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">April 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/04/02/HTTP/Http-%E5%8D%8F%E8%AE%AE%E8%AF%A6%E8%A7%A3/">Http 协议详解</a>
                                        <p>
                                            引言HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。

HTTP协议的主要特点可概括如下：1.支持客户/服务器...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">March 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 30, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/30/Js/Es6-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9-%E4%B8%8B/">Es6 核心内容 下</a>
                                        <p>
                                            import export这两个家伙对应的就是es6自己的module功能。
我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：一方面js代码变得很臃肿，难以维护另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 30, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/30/Js/Es6-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9-%E4%B8%8A/">Es6 核心内容上</a>
                                        <p>
                                            在我们正式讲解ES6语法之前，我们得先了解下Babel。Babel
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：
最常用的ES6特性let, const, class, extends, super, arrow functions, template stri...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 28, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/28/Node/Node%E5%85%A5%E9%97%A8/">Node入门</a>
                                        <p>
                                            什么是Node.js按照 Node.js官方网站主页 的说法:

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficien...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/27/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-6-React%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F/">React 源码分析 6 React合成事件系统</a>
                                        <p>
                                            React合成事件特点React自己实现了一套高效的事件注册，存储，分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比，它有如下特点


1.React组件上声明的事件最终绑定到了document这个DOM节点上，而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DO...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/27/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-5-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%EF%BC%8Cref-key-ReactDOM/">React源码分析 5 组件通信，ref,key,ReactDOM</a>
                                        <p>
                                            组件之间通信父组件向子组件通信React规定了明确的单向数据流，利用props将数据从父组件传递给子组件。故我们可以利用props，让父组件给子组件通信。故父组件向子组件通信还是很容易实现的。引申一点，父组件怎么向孙子组件通信呢？可以利用props进行层层传递，使用ES6的…运算符可以用很简洁的方式把props传递给孙子组件。这里我们就不举例了。
要注意的一点是，setProps,repla...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/27/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-4-setState%E6%9C%BA%E5%88%B6/">React 源码分析 4 setState机制</a>
                                        <p>
                                            概述React作为一门前端框架，虽然只是focus在MVVM中的View部分，但还是实现了View和model的绑定。修改数据的同时，可以实现View的刷新。这大大简化了我们的逻辑，只用关心数据流的变化，同时减少了代码量，使得后期维护也更加方便。这个特性则要归功于setState()方法。React中利用队列机制来管理state，避免了很多重复的View刷新。下面我们来从源码角度探寻下set...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 26, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/26/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-3-React%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E8%AF%A6%E8%A7%A3/">React 源码分析 3 React生命周期详解</a>
                                        <p>
                                            React生命周期流程调用流程可以参看上图。分为实例化，存在期和销毁三个不同阶段。介绍生命周期流程的文章很多，相信大部分同学也有所了解，我们就不详细分析了。很多同学肯定有疑问，这些方法在React内部是在哪些方法中被调用的呢，他们触发的时机又是什么时候呢。下面我们来详细分析。
实例化生命周期getDefaultProps在React.creatClass()初始化组件类时，会调用getDef...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 26, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/26/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-2-React%E6%8F%92%E5%85%A5Dom%E6%B5%81%E7%A8%8B/">React 源码分析 2 React组件插入Dom流程</a>
                                        <p>
                                            简介React广受好评的一个重要原因就是组件化开发，一方面分模块的方式便于协同开发，降低耦合，后期维护也轻松；另一方面使得一次开发，多处复用成为现实，甚至可以直接复用开源React组件。开发完一个组件后，我们需要插入DOM中，一般使用如下代码
1234ReactDOM.render(  &lt;h1&gt;Hello, world!&lt;/h1&gt;,  document.getElem...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/25/React/React-%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90-1-%E7%BB%84%E4%BB%B6%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%88%9B%E5%BB%BA%EF%BC%88createClass%EF%BC%8CcreateElement/">React 源码分析 1 组件和对象的创建（createClass，createElement)</a>
                                        <p>
                                            React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组件间耦合减少，方便维护。ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调用cr...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/23/Js/javascript%E5%AE%9E%E7%94%A8%E6%8A%80%E5%B7%A7/">javascript实用技巧</a>
                                        <p>
                                            更短的数组去重写法123[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]//[2, "12", 12, 1, 6, 13]//es6的新特性
对象深浅拷贝1.深拷贝和浅拷贝只针对像Object, Array这样的引用类型数据。
2.浅拷贝是对对象引用地址进行拷贝，并没有开辟新的栈，也就是拷贝后的结果是两个对象指向同一个引用地址，修改其中一个对象的属性，则...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 22, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/22/QuickApp/%E5%BF%AB%E5%BA%94%E7%94%A8%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/">快应用快速入门</a>
                                        <p>
                                            QuickApp作为一个前端工程师，毕竟要顺流技术的发展。
3月20日，小米、中兴、华为、金立、联想、魅族、努比亚、OPPO、vivo、一加，共十家手机厂商在北京联合召开快应用标准启动发布会，手机厂商与中国信息通信研究院、电信终端产业协会、中国软件行业协会及数百家知名移动互联网应用企业共襄盛举，共同见证移动应用新生态的到来。
既然是国内厂商发布的，所以只针对安卓用户。
怎么感觉都是在对微信小...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 21, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/21/React/%E5%8A%A9%E4%BD%A0%E7%90%86%E8%A7%A3React%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/">助你理解React高阶组件</a>
                                        <p>
                                            高阶组件高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。
具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件
高阶组件在React第三方库中很常见，比如Redux的connect方法和Relay的createContainer.
使用高阶组件（H...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 20, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/20/Record/%E5%89%8D%E7%AB%AF%E6%B7%B1%E6%B5%B7/">前端深海</a>
                                        <p>
                                            前端工程师所需知识


                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 20, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/20/React/React%E7%9A%84Diff%E7%AE%97%E6%B3%95/">React的Diff算法</a>
                                        <p>
                                            React 是 Facebook 开发的构建用户界面的类库.它从设计之初就将性能作为重点.这篇文章我展示 diff 算法和渲染过程怎样工作, 你可以借鉴优化自己的应用.
Diff 算法在深入实现的细节之前, 需要了解一下 React 怎样工作的.
123456789class MyComponent extends React.Component&#123;    render() &#12...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 19, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/19/HTML5/Html5/">Html5</a>
                                        <p>
                                            html5特性用于媒介回放的 video 和 audio 元素Video支持的视频格式Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件（.ogg）
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件(.mp4)
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件(.mkv)
12&lt;vide...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 18, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/18/CSS3/20%E4%B8%AA%E8%B6%85%E7%BA%A7%E5%AE%9E%E7%94%A8%E7%9A%84css%E4%BB%A3%E7%A0%81/">20个超级实用的css代码</a>
                                        <p>
                                            原文地址
大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大家介绍25个CSS技巧代码，我相信这些对你肯家有很大的作用。
使用text-indent来隐藏文本这个常用在图片...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 13, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/13/Interview/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%88%E5%90%AB%E4%BA%BA%E4%BA%8B%E6%96%B9%E9%9D%A2%EF%BC%89/">前端面试题（含人事方面）</a>
                                        <p>
                                            前端方面1.隐藏html元素的两种方式？它们的区别是什么？【display: none】：隐藏元素及元素内的所有内容，并且该元素的位置、宽高等其他属性值一并“消失”；【visibility: hidden】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。 
2.$.each和$(selector).each()的区别？  $.each和$(selector).each(...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 12, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/12/Interview/js%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/">js面试题汇总</a>
                                        <p>
                                            闭包是什么？闭包的用处。 闭包是内部函数对外部函数作用域的引用。而在函数外部引用函数内部变量，可以通过闭包实现。闭包的用处往往是在模块封装的时候。可以将模块内部公有部分暴露出来。(闭包是基础性的问题，这里只是简要的阐述了一下它的概念) 闭包详解(阮一峰)
原型以及原型链js与常用的编程语言不一样，他是靠原型继承的，并不是类。使用造零件的方式进行类比，通过类继承的方式就是通过一个模型盒铸件，而...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 11, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/11/%E6%80%A7%E8%83%BD/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">前端性能优化</a>
                                        <p>
                                            前端优化的目的是什么？

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　
　
从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。　　

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

页面级优化减少http请求减少http请求数的主要途径包括：


(1). 从设计实现层面简化页...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 10, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/10/study/Ajax%E5%B7%B2%E6%AD%BB%EF%BC%8CFetch%E6%B0%B8%E7%94%9F/">Ajax已死，Fetch永生</a>
                                        <p>
                                            由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。

本文不是 Fetch API 科普贴，其实是讲异步处理和 Promise 的。Fetch API 很简单，看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHA...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 09, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/09/Tools/Git%E5%88%86%E5%B8%83%E5%BC%8F%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E4%BD%BF%E7%94%A8/">Git分布式版本管理系统使用</a>
                                        <p>
                                            #快速开始
安装windows安装在Windows上使用Git，可以从Git官网直接下载安装程序，（网速慢的同学请移步国内镜像），然后按默认选项安装即可。
安装完成后，在开始菜单里找到“Git”-&gt;“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！安装完成后，还需要最后一步设置，在命令行输入：
12$ git config --global user.name ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 08, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/08/React/React-router/React-router%E5%AD%A6%E4%B9%A0/">React-router学习</a>
                                        <p>
                                            React-router API接口demo 地址
组件RouterReact Router 的重要组件。它能保持 UI 和 URL 的同步。
Props children(required)一个或多个的 Route 或 PlainRoute。当 history 改变时，  会匹配出 Route 的一个分支，并且渲染这个分支中配置的组件，渲染时保持父 route 组件嵌套子 route 组件...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 07, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/07/Js/%E4%BD%A0%E8%BF%98%E5%9C%A8%E7%94%A8for%E5%BE%AA%E7%8E%AF%E5%A4%A7%E6%B3%95%E5%90%97%EF%BC%9F/">你还在用for循环大法吗？</a>
                                        <p>
                                            文章主要介绍了数组Array.prototype方法的使用，需要的朋友可以参考下，如果你是大神，请直接无视。

在ES5中，一共有9个Array方法 http://kangax.github.io/compat-table/es5/

  Array.prototype.indexOf  Array.prototype.lastIndexOf  Array.prototype.every  ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 06, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/06/CSS3/flex%E5%92%8Cgrid%E5%B8%83%E5%B1%80/">flex和grid布局</a>
                                        <p>
                                            网页布局（layout）是 CSS 的一个重点应用。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex 布局2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 05, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/05/React/Redux/%E7%9C%8B%E6%BC%AB%E7%94%BB%EF%BC%8C%E5%AD%A6%E4%B9%A0Redux/">看漫画，学习Redux</a>
                                        <p>
                                            React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。

代码结构
组件之间的通信

对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了Flux架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 04, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/04/react-native/react-native%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E5%A4%A7%E6%B1%87%E8%81%9A/">react-native学习资源大汇聚</a>
                                        <p>
                                            React Native 学习资源
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。


本文汇集了React-Native各类学习资源，方便大家学习，同时还有 [Awesome React Native系列]，请收下！(    https://github.com/jondot/awesom...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 03, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/03/React/%E5%AD%A6%E4%B9%A0react-js%E6%AF%94%E4%BD%A0%E6%83%B3%E8%B1%A1%E7%9A%84%E7%AE%80%E5%8D%95/">学习react.js比你想象的简单</a>
                                        <p>
                                            原文地址

学习 React.js 比你想象的要简单
React 全部都是组件化的React 是围绕可重用组件的概念设计的。你定义小组件并将它们组合在一起形成更大的组件。
无论大小，所有组件都是可重用的，甚至在不同的项目中也是如此。
React 组件最简单的形式，就是一个普通的 JavaScript 函数：123456function Button (props) &#123;  // 这里...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 02, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/02/Ts/5%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8BTypeScript/">5分钟上手TypeScript</a>
                                        <p>
                                            让我们使用TypeScript来创建一个简单的Web应用。安装TypeScript有两种主要的方式来获取TypeScript工具：


通过npm（Node.js包管理器）
安装Visual Studio的TypeScript插件


Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studi...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">March 01, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/03/01/react-native/react-native%E4%BD%BF%E7%94%A8%E8%BF%87%E7%A8%8B%E4%B8%AD%E7%9A%84%E6%8A%A5%E9%94%99%EF%BC%88%E6%8C%81%E7%BB%AD%E6%9B%B4%E6%96%B0%E4%B8%AD%EF%BC%89/">react-native使用过程中的报错（持续更新中）</a>
                                        <p>
                                            ReactNative 遇到的报错react-native 矢量库 react-native-vector-icons的报错解决解决方法：将项目目录下 node_modules/react-native/local-cli/core/fixtures/files/package.json删除如果还出现这个错误
解决方案：删除重新安装react-native-vector-icons 安装完成...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item period">
                                    <div class="timeline-info"></div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h2 class="timeline-title">February 2018</h2>
                                    </div>
                                </li>
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 28, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/28/React/react%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/">react开发环境搭建</a>
                                        <p>
                                            使用creat-react-app搭建基于webpack的react开发环境
facebook官方文档Quick Start:
1234567891011npm install -g create-react-app       //安装create-react-app，yarn命令(需要安装yarn) yarn add create-react-appcreate-react-app my...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 27, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/27/Js/JavaScript%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A745%E6%8B%9B/">JavaScript奇技淫巧44招</a>
                                        <p>
                                            原文地址

首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。
使用===取代====和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。
12345678[10] === 10    // is false[10]  == 10    // is tr...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 26, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/26/Js/10%E4%B8%AA%E6%9C%80%E4%BD%B3ES6%E7%89%B9%E6%80%A7/">10个最佳ES6特性</a>
                                        <p>
                                            10个最佳ES6特性原文地址
ES6，正式名称是ECMAScript2015，但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准，但是它已经广泛用于编程实践中。如果你还没用过ES6，现在还不算太晚…
函数参数默认值不使用ES6为函数设置默认值
123456function foo(height, color)&#123;    var height = height ...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 25, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/25/React/React-%E6%8A%80%E6%9C%AF%E6%A0%88/">React 技术栈</a>
                                        <p>
                                            React 技术栈系列原文地址


ES6教程
Bable教程
React教程   示例
Webpack
Flex教程  示例
Css Modules  示例
React-router 示例
[Flux 架构] 示例 示例
Redux架构  教程一  教程二  教程三
Mocha测试框架 教程   示例
Istanbul 覆盖率框架教程
React 单元测试教程  示例



                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 24, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/24/Tools/gulp%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BD%BF%E7%94%A8/">gulp配置及使用</a>
                                        <p>
                                            gulp 入门指南1.全局安装 gulp：1$ npm install --global gulp
2.作为项目的开发依赖（devDependencies）安装：1$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：12345var gulp = require('gulp');gulp.task('default',...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 24, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/24/Js/%E5%8F%AA%E6%9C%8920%E8%A1%8CJavascript%E4%BB%A3%E7%A0%81%EF%BC%81%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%86%99%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E/">只有20行Javascript代码！手把手教你写一个页面模板引擎</a>
                                        <p>
                                            原文地址
123456789101112131415var TemplateEngine = function(html, options) &#123;    var re = /&lt;%([^%&gt;]+)?%&gt;/g, reExp = /(^( )?(if|for|else|switch|case|break|&#123;|&#125;))(.*)?/g, code = 'va...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 23, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/23/HTML5/%E5%90%8EHTML5%E6%97%B6%E4%BB%A3/">后HTML5时代</a>
                                        <p>
                                            HTML5 Device API原文地址
让音乐随心而动 - 音频处理 Web audio APIAudio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。

系统要求 :ios6+、android chrome、android firefox

核心代码 :
12345var context = new webkitAudio...
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 11, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/11/react-native/react-native%20Components/">react-native UI组件</a>
                                        <p>
                                            React-native Components(自己理解)react-native 官网react-native 中文官网

1.ActivityIndicator 显示一个圆形的loading提示符号。2.Button 按钮3.DataPickerIOS  ios日期选择组件4.DrawerLayoutAndriod   andriod抽屉导航5.FlatList  高性能简单列表组件6....
                                        </p>
                                    </div>
                                </li>
                            
                                
                                <li class="timeline-item">
                                    <div class="timeline-info">
                                        <span class="gradient-text">February 11, 2018</span>
                                    </div>
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <a class="timeline-title" target="_self" href="/2018/02/11/react-native/React-native-API/">React-native API</a>
                                        <p>
                                            React-native API(自己理解)最近在学习react-native,而且重新利用hexo 构建了自己的主页。 之前也在csdn,简书也写过博客，打算利用空闲时间把博客迁移进来。
进入主题吧。react-native 官网react-native 中文官网



1.AccessibilityInfo 无障碍功能 给残障人士使用
2.ActionSheetIOS  IOS底部弹出选...
                                        </p>
                                    </div>
                                </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="back-to-top" class="animated fadeIn faster">
        <div class="flow"></div>
        <span class="percentage animated fadeIn faster">0%</span>
        <span class="iconfont icon-top02 animated fadeIn faster"></span>
    </div>
</body>
<footer>
    <p class="copyright" id="copyright">
        &copy; 2020
        <span class="gradient-text">
            张白告丶
        </span>.
        Powered by <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a>
        Theme
        <span class="gradient-text">
            <a href="https://github.com/TriDiamond/hexo-theme-obsidian" title="Obsidian" target="_blank" rel="noopener">Obsidian</a>
        </span>
        <small><a href="https://github.com/TriDiamond/hexo-theme-obsidian/blob/master/CHANGELOG.md" title="v1.4.3" target="_blank" rel="noopener">v1.4.3</a></small>
    </p>
</footer>

<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
  MathJax.Hub.Config({
    "HTML-CSS": {
      preferredFont: "TeX",
      availableFonts: ["STIX", "TeX"],
      linebreaks: {
        automatic: true
      },
      EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
    },
    tex2jax: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"]
      ],
      processEscapes: true,
      ignoreClass: "tex2jax_ignore|dno",
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    TeX: {
      noUndefined: {
        attributes: {
          mathcolor: "red",
          mathbackground: "#FFEEEE",
          mathsize: "90%"
        }
      },
      Macros: {
        href: "{}"
      }
    },
    messageStyle: "none"
  });
</script>
<script>
  function initialMathJax() {
    MathJax.Hub.Queue(function () {
      var all = MathJax.Hub.getAllJax(),
        i;
      // console.log(all);
      for (i = 0; i < all.length; i += 1) {
        console.log(all[i].SourceElement().parentNode)
        all[i].SourceElement().parentNode.className += ' has-jax';
      }
    });
  }

  function reprocessMathJax() {
    if (typeof MathJax !== 'undefined') {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
  }
</script>



    
<link rel="stylesheet" href="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.css">

    
<script src="//cdn.bootcss.com/gitalk/1.5.0/gitalk.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/obsidian.js"></script>
<script src="/js/jquery.truncate.js"></script>
<script src="/js/search.js"></script>


<script src="//cdn.bootcss.com/typed.js/2.0.10/typed.min.js"></script>


<script src="//cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>


<script src="https://cdn.bootcss.com/codemirror/5.48.4/codemirror.min.js"></script>

    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/javascript/javascript.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/css/css.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/xml/xml.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/htmlmixed/htmlmixed.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/clike/clike.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/php/php.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/shell/shell.min.js"></script>


    
<script src="//cdn.bootcss.com/codemirror/5.48.4/mode/python/python.min.js"></script>




    
<script src="/js/busuanzi.min.js"></script>

    <script>
        $(document).ready(function () {
            if ($('span[id^="busuanzi_"]').length) {
                initialBusuanzi();
            }
        });
    </script>



<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/photoswipe/4.1.3/default-skin/default-skin.min.css">


<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.js"></script>
<script src="//cdn.bootcss.com/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>



    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="//www.googletagmanager.com/gtag/js?id=UA-149874671-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-149874671-1');
    </script>





<script>
    function initialTyped () {
        var typedTextEl = $('.typed-text');
        if (typedTextEl && typedTextEl.length > 0) {
            var typed = new Typed('.typed-text', {
                strings: ["Think like an artist, develop like an artisan", "艺术家思维去思考问题，工匠创造精神去开发"],
                typeSpeed: 90,
                loop: true,
                loopCount: Infinity,
                backSpeed: 20,
            });
        }
    }

    if ($('.article-header') && $('.article-header').length) {
        $(document).ready(function () {
            initialTyped();
        });
    }
</script>




</html>
